<script>
import { ElInput } from 'element-plus';

export default {
  data() {
    return {
      inputValue: '',
      dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
      inputVisible: false,
      InputRef: null
    };
  },
  methods: {
    handleClose(tag) {
      const index = this.dynamicTags.indexOf(tag);
      if (index > -1) {
        this.dynamicTags.splice(index, 1);
      }
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.InputRef.focus();
      });
    },
    handleInputConfirm() {
      if (this.inputValue.trim()) {
        this.dynamicTags.push(this.inputValue);
        this.inputValue = '';
      }
      this.inputVisible = false;
    }
  },
  components: {
    ElInput
  }
};
</script>

<template>
  <el-container>
    <!-- 总的内容区域 -->
    <div class="content-container">
      <!-- 公寓配套 -->
      <el-header>配套信息管理</el-header>
      <el-main>
        <!-- 公寓配套内容区域 -->
        <div class="apartment-features">
          <!-- 健身房、停车场、电梯、咖啡室等 -->
          <label for="">公寓配套</label>

        </div>
        <!-- 房间配套内容区域 -->
        <div class="room-features">
          <!-- 空调、洗衣机、冰箱、床、橱柜、书桌、WIFI、椅子等 -->
          <label for="">房间配套</label>

        </div>
      </el-main>

      <!-- 房间配套 -->
      <el-header>标签管理</el-header>
      <el-main>

        <div class="flex gap-2">
          <label for="">公寓标签</label>

          <el-tag
            v-for="tag in dynamicTags"
            :key="tag"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-if="inputVisible"
            ref="InputRef"
            v-model="inputValue"
            class="w-20"
            size="small"
            @keyup.enter="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button v-else class="button-new-tag" size="small" @click="showInput">
            + New Tag
          </el-button>
        </div>

      </el-main>

      <!-- 标签管理 -->
      <el-header>标签管理</el-header>
      <el-main>
        <!-- 标签管理内容区域 -->
        <div class="tag-management">
          <!-- 近地铁、近公交、停车位、带电梯等 -->
        </div>
      </el-main>
    </div>
  </el-container>
</template>

<style scoped>
.content-container {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 40px; // 增加内边距
  width: 80%; // 设置宽度为80%
  height: auto; // 高度自适应
}

.apartment-features,
.room-features,
.tag-management {
  padding: 30px; // 调整子内容区域的内边距
}
</style>